import { BasicColumn, FormSchema } from "@/components/Table";
import { h } from "vue";
import { Tag } from "ant-design-vue";

export const columns: BasicColumn[] = [
  {
    title: "部门名称",
    dataIndex: "deptName",
    width: 160,
    align: "left",
  },
  {
    title: "排序",
    dataIndex: "orderNo",
    width: 50,
  },
  {
    title: "状态",
    dataIndex: "status",
    width: 80,
    customRender: ({ record }) => {
      const status = record.status;
      const enable = ~~status === 0;
      const color = enable ? "green" : "red";
      const text = enable ? "启用" : "停用";
      return h(Tag, { color: color }, () => text);
    },
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    width: 180,
  },
  {
    title: "备注",
    dataIndex: "remark",
  },
];

export const searchFormSchema: FormSchema[] = [
  {
    field: "deptName",
    label: "部门名称",
    component: "Input",
    colProps: { span: 8 },
  },
  {
    field: "status",
    label: "状态",
    component: "Select",
    componentProps: {
      options: [
        { label: "启用", value: "0" },
        { label: "停用", value: "1" },
      ],
    },
    colProps: { span: 8 },
  },
];

export const formSchema: FormSchema[] = [
  {
    field: "deptName",
    label: "部门名称",
    component: "Input",
    required: true,
  },
  {
    field: "parentDept",
    label: "上级部门",
    component: "TreeSelect",
    ifShow({ values }) {
      const { deptName, parentDept } = values;
      // Hide without a parentDept when editing
      return parentDept || (!deptName && !parentDept);
    },
    componentProps: {
      fieldNames: {
        label: "deptName",
        value: "id",
      },
      getPopupContainer: () => document.body,
    },
    required: true,
  },
  {
    field: "orderNo",
    label: "排序",
    component: "InputNumber",
    required: true,
  },
  {
    field: "status",
    label: "状态",
    component: "RadioButtonGroup",
    defaultValue: "0",
    componentProps: {
      options: [
        { label: "启用", value: "0" },
        { label: "停用", value: "1" },
      ],
    },
    required: true,
  },
  {
    label: "备注",
    field: "remark",
    component: "InputTextArea",
  },
];
